import React from 'react';
import './index.scss';
import { Tree, Tabs } from 'antd';
import {
    DownOutlined
} from '@ant-design/icons';
import http from '../../api/index';
import authorProfile from '../../assets/img/banner/authorProfile.jpg';
const { TabPane } = Tabs;

class index extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            authorInfo: {
                authorId: '',
                authorNm: '',
                recommend: '',
                profile: ''
            },
            treeData: [
                {
                    title: 'Vue doc',
                    key: '0-0',
                    type: '0',
                    icon: <img src={require('../../assets/img/lanIcon/vue.png')} alt="" />,
                    children: [
                        {
                            title: 'leaf',
                            key: '0-0-0',
                            type: '1',
                            icon: '',
                        },
                        {
                            title: 'leaf',
                            key: '0-0-1',
                            type: '1',
                            icon: '',
                        },
                    ],
                }, {
                    title: 'React doc',
                    key: '0-1',
                    type: '0',
                    icon: <img src={require('../../assets/img/lanIcon/react_ts.png')} alt="" />,
                    children: [
                        {
                            title: 'leaf',
                            key: '0-1-0',
                            type: '1',
                            icon: '',
                        },
                        {
                            title: 'leaf',
                            key: '0-1-1',
                            type: '1',
                            icon: ''
                        },
                    ],
                },
            ]
        }
        this.getMenuList = this.getMenuList.bind(this)
    }
    onSelect(selectedKeys, e) {
        if (e.node.type === '1') {
            this.props.onSelect(selectedKeys[0], '', 1, 5)
        }
    }
    componentDidMount() {
        this.getMenuList()
    }

    getMenuList() {
        let menuReqData = {}
        // 获取菜单数据
        http.menu.menuList(menuReqData).then((res) => {
            this.setState((state) => ({
                treeData: res
            }))
        })
        let authorReqData = {}
        // 获取作者信息
        http.author.authorInfo(authorReqData).then((res) => {
            this.setState((state) => ({
                authorInfo: res.data[0]
            }))
        })
    }

    render() {
        return (
            <Tabs defaultActiveKey="1" >
                <TabPane tab="menu" key="1">
                    <Tree
                        showLine
                        showIcon
                        switcherIcon={<DownOutlined />}
                        treeData={this.state.treeData.data}
                        onSelect={this.onSelect.bind(this)}
                    />
                </TabPane>

                <TabPane tab="about" key="3">
                    <div style={{ width: '100%' }}>
                        <img src={authorProfile} alt="" style={{ width: '100%', borderRadius: '20px' }} />
                        <div style={{ fontFamily: 'fantasy', textAlign: 'center', padding: '5px 3px' }}>
                            <div>
                                作者:
                                {this.state.authorInfo.authorNm}
                            </div>
                            <div>
                                介绍:
                                {this.state.authorInfo.recommend}
                            </div>

                        </div>
                    </div>
                </TabPane>
            </Tabs>
        )
    }
}
export default index;